<template>
  <view :class="$style.container" class="flex-col-center absolute">
    <view >
      <image :class="$style.image" :src="screenImg" mode="widthFix" @click="changeScreen"> </image>
      <view :class="$style.text">影像</view>
    </view>
    <view :class="$style.content" @click="changeViewAngel">
      <image :class="$style.image" :src="angelViewImg" mode="widthFix"> </image>
      <view :class="$style.text">视角</view>
    </view>
  </view>
</template>

<script setup lang='ts'>
import screenImg from "@/static/images/receive-assign/screen.png";
import angelViewImg from "@/static/images/receive-assign/ange_view.png";

function changeScreen() {
  console.log('影像切换');
  
}
function changeViewAngel() {
  console.log('视角切换');
}
</script>

<style lang='less' module>
.container {
  height: 240rpx;
  width: 90rpx;
  right: 10rpx;
  bottom: 49%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10rpx;

  .content {
    margin-top: 10rpx;
  }
  .image {
    width: 55rpx;
    height: 55rpx;
  }

  .text {
    font-weight: 400;
    font-size: 28rpx;
    font-family: Microsoft YaHei;
    color: #333333;
    margin-top: -5rpx;
  }
}
</style>
